<template>
  <div class="nav">
    <div class="nav-normal" v-for="item in data" :key="item.id">
        <p><img :src="item.imgurl" alt=""></p>
        <p>{{item.name}}</p>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            data:[
                {
                    id:1,
                    name:"首页",
                    imgurl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpicnew9.photophoto.cn%2F20150502%2Fxiaomiyingyongshangdiantubiaotupian-09743651_1.jpg&refer=http%3A%2F%2Fpicnew9.photophoto.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656950487&t=44b49ebce96da8d19298424226800e02"
                },
                {
                    id:2,
                    name:"分类",
                    imgurl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpicnew9.photophoto.cn%2F20150502%2Fxiaomiyingyongshangdiantubiaotupian-09743651_1.jpg&refer=http%3A%2F%2Fpicnew9.photophoto.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656950487&t=44b49ebce96da8d19298424226800e02"
                },
                {
                    id:3,
                    name:"米圈",
                    imgurl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpicnew9.photophoto.cn%2F20150502%2Fxiaomiyingyongshangdiantubiaotupian-09743651_1.jpg&refer=http%3A%2F%2Fpicnew9.photophoto.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656950487&t=44b49ebce96da8d19298424226800e02"
                },
                {
                    id:4,
                    name:"购物车",
                    imgurl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpicnew9.photophoto.cn%2F20150502%2Fxiaomiyingyongshangdiantubiaotupian-09743651_1.jpg&refer=http%3A%2F%2Fpicnew9.photophoto.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656950487&t=44b49ebce96da8d19298424226800e02"
                },
                {
                    id:6,
                    name:"我的",
                    imgurl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpicnew9.photophoto.cn%2F20150502%2Fxiaomiyingyongshangdiantubiaotupian-09743651_1.jpg&refer=http%3A%2F%2Fpicnew9.photophoto.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656950487&t=44b49ebce96da8d19298424226800e02"
                },
            ]
        }
    }
}
</script>

<style scoped lang="scss">
.nav{
    width: 400px;
    height: 80px;
    margin-top: 10px;
    background-color: white;
    display: flex;
    padding-top: 15px;
    border-top: 1px solid #999;
}
.nav-normal{
    width: 80px;
    img{
        width: 30px;
        height: 30px;
    }
    &:hover{
        color: orange;
    }
}
p{
    text-align: center;
}
</style>